<template>
	<view class="content plr15 ptb15">
        <view class="bgWhite radius6 plr15 ptb15 ">
                <view class="artItem  justify-between align-center" v-for="(i,n) in list" :key="n">
                    <image :src="$domain.api+i.avatar" mode=""></image>
                    <view class="flex-col justify-between  flex1">
                        <text class="name">{{i.realname}}</text>
                        <text class="clamp2">{{i.content}}</text>
                    </view>
                    <view class="right ml15">
                        吉他
                    </view>
                </view>
        </view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list: [],
				
			}
		},
		
		onReady() {
			
		},
        onLoad() {
            this.getList()
        },
		methods: {
            async getList(){
              const {data,code}  =     await this.$api.getArtist()
              console.log(code,data)
              if(code==200){
                  this.list = data
              }
            }
		}
	}
</script>
<style scoped lang="scss">
            
        .artItem {
            font-size: 24rpx;
            color: #9F9F9F;
            margin-bottom: 46rpx;
            image{
                width: 120rpx;
                height: 120rpx;
                border-radius: 60rpx;
                margin-right: 32rpx;
            }
            .right{
                width: 120rpx;
                height: 54rpx;
                background: rgba(0,199,119,0.2);
                border-radius: 60rpx ;
                font-size: 28rpx;
                color: #2CC6A1;
                text-align: center;
                line-height: 54rpx;
            }
            .name{
                font-size: 32rpx;
                color: #3D3D3D;
            }
        }
</style>